<template>
    <div class="content">
        <div class="file-nav">
            <div>
                <div class="title">案例背景资料</div>
                <ul class="list">
                    <li v-for="item in caseList" :key="item" @click="toggleFile(item)">{{item | formatFile}}</li>
                </ul>
            </div>
            <div>
                <div class="title">参考答案</div>
                <ul class="list">
                    <li v-for="item in answerList" :key="item" @click="toggleFile(item)">{{item | formatFile}}</li>
                </ul>
            </div>
        </div>
        <div class="file-view">
            <iframe :src="iframeUrl" frameborder="0" width="100%" height="100%"></iframe>
        </div>
    </div>
</template>
<script>
import { queryCaseInfo } from '@/api/caseManage'

export default {
    data () {
        return {
            caseList: [],
            answerList: [],
            file: ''
        }
    },
    created () {
        const { id } = this.$route.query
        id && this.queryCase(id)
    },
    computed: {
        iframeUrl () {
            const fullPath = window.location.origin + '/vod/emtStudy/upload/default/' + this.file
            if (/\.pdf$/.test(this.file)) {
                return '/static/pdf/web/viewer.html?file=' + fullPath
            }
            return `https://view.officeapps.live.com/op/view.aspx?src=${fullPath}`
        }
    },
    methods: {
        queryCase (id) {
            queryCaseInfo(id).then(res => {
                if (res.data.code === '0000') {
                    const { infoDtoList, answerInfoDtoList } = res.data.data
                    this.caseList = infoDtoList.map(item => item.infoName)
                    this.answerList = answerInfoDtoList.map(item => item.answerName)
                    if (this.caseList.length) {
                        this.file = this.caseList[0]
                    } else if (this.answerList) {
                        this.file = this.answerList[0]
                    }
                }
            })
        },
        toggleFile (file) {
            this.file = file
        }
    }
}
</script>
<style lang="less" scoped>
.content {
    height: 100%;
}
.file-view {
    border: 1px solid #ccc;
    margin-right: 200px;
    height: 100%;
}
.file-nav {
    width: 200px;
    height: 100%;
    overflow-y: auto;
    float: right;
    border: 1px solid #ccc;
    border-left: 0;
    .title {
        font-size: 16px;
        line-height: 32px;
        padding: 10px;
    }
    .list {
        padding-left: 20px;
        li {
            padding: 0 10px;
            line-height: 28px;
            cursor: pointer;
            &:hover {
                color: #1177E8;
            }
        }
    }
}
</style>
